/*竖屏时使用的样式*/
@media all and (orientation:portrait) {

}

/*横屏时使用的样式*/
@media all and (orientation:landscape) {

}

/*开启硬件加速
解决页面闪白
保证动画流畅*/
.cube {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

/* 设置需要的标签内边距和外边距为0，仅添加需要的标签，不建议使用星号（*）代替，以下为示例 */
* { margin: 0; padding: 0; outline: none;}
html{font-family: "Helvetica Neue", "Helvetica", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Arial", "sans-serif";font-size:62.5%;}
body{color:#333333;}

/*图片无边框*/
img { border: none; }

/* 清除列表样式设置，以下为示例，仅写你用到的标签 */
ul , li{ list-style: none; }

/*文字对齐*/
.align_left { text-align: left; }
.align_center { text-align: center; }
.align_right { text-align: right; }

/* 设置链接默认样式，默认颜色和鼠标移入颜色根据实际需求自行更改 */
a{text-decoration:none;color:#4a4a4a;
	transition:color 0.2s;
	-webkit-transition: color 0.2s;
	-moz-transition: color 0.2s;
	-ms-transition: color 0.2s;
	-o-transition: color 0.2s;
}
a,
a:hover,
a:focus,
a:active{text-decoration:none !important;}

/*清除浮动 两种方式根据具体需求自选*/
.cf:before, .cf:after { content:"";  display:table;  }
.cf:after {  clear:both;  }  
.cf { zoom:1;  } /*方式1*/
.of { overflow:hidden; }/*方式2*/

/*表格边框合并*/
table{border-collapse:collapse;}

/*动画*/
.imgWrap img,
.animate{
transition:all 0.3s;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-ms-transition:all 0.3s;
-o-transition:all 0.3s;
}

/*浮动*/
.f_left{float:left;}
.f_right{float:right;}

/*强制换行*/
.break_word{word-wrap:break-word;word-break:break-all;}
/*文字强制不断行*/
.nobreak{white-space:nowrap;}

/*禁止换行*/
.keep_all{word-break:keep-all;white-space:nowrap;}

/*超出省略号，仅限单行，并且需要设定一个宽度*/

.ellipsis { overflow: hidden; text-overflow: ellipsis; display: block; white-space: nowrap }

/*段落两端对齐*/
.txt_justify{text-align:justify;text-justify:inter-ideograph}

/*两端对齐 若单行，至少要3个字符，只有两个字符的，中间补一个空格*/
.text_justify {
	text-align: justify; text-justify: distribute-all-lines;/*ie6-8*/ 
	text-align-last: justify;/* ie9*/ 
}

/*修复火狐按钮文字不垂直居中的bug*/
input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
	border:none;
	padding:0;
}

.hide{display:none !important;}
/*常用边距*/
.mb5{margin-bottom:.5rem;}
.mb10{margin-bottom:1rem;}
.mb20{margin-bottom:2rem;}
.mb30{margin-bottom:3rem;}
.mb40{margin-bottom:4rem !important;}

/*布局框架*/
.m_center{margin:0 auto;}
.container{position:relative;}
.container_full{width:100%;}
.container_half{width:50%;}

/*表单元素*/
body{padding-top:6.4rem;}
.nav{position:fixed;left:0;top:0;z-index:2;width:100%;background:#fff;}
.nav,
.logo{height:6.4rem;}
.logo{display:inline-block;vertical-align:middle;line-height:6.4rem;}
.ico-menu img,.logo img{vertical-align:middle}
.ico-menu{position:absolute;left:0;top:0;text-align:center;width:6.4rem;line-height:6.4rem;}
.ico-menu:active{background:rgba(235,235,235,0.5);}

.search{position:absolute;border:1px solid #fff;position:absolute;right:1rem;overflow:hidden;top:1.7rem;background:#fff;border-radius:3rem;padding-right:.5rem;height:3rem;}
.search .zz{position:absolute;z-index:1;width:100%;height:100%;}
.search .ipt{width:0;padding:0;height:3rem;border:none;}
.search .button{width:3rem;height:3rem;background:url(../image/02.png) center center no-repeat;background-size:2.5rem 2.5rem;border:none;float:right;}
.search.on{border:1px solid #b5b5b5;}
.search.on .ipt{width:20rem;padding:0 1rem;}
.search.on .zz{display:none;}

.index-text{padding:5rem 0;font-size:1.6rem;line-height:2.4rem;}

.line{margin:0 1rem;border-bottom:0.1rem solid #b5b5b5;}

.footerNav{font-size:1.6rem;padding:2rem 0;}
.footerNav a{color:#696969;line-height:4rem;}

.navzz{background:rgba(0,0,0,0.5);position:fixed;z-index:4;width:100%;height:100%;top:0;left:100%;}
.navzz.on{left:0;}

.subNav{background:#000;top:0;left:-50%;bottom:0;z-index:5;position:fixed;width:50%;}
.subNav.on{left:0;}
.subNav a{color:#fff;font-size:1.8rem;line-height:3rem;display:block;padding:0 2rem;margin-top:1rem;}
.subNav a:active{background:rgba(255,255,255,0.06)}
.subNav .ico{display:block;padding:1rem;margin-bottom:5rem;}

.banner{height:20rem;background-position:center center;text-align:center;background-repeat:no-repeat;position:relative;color:#fff;background-size:cover;display:table-cell;vertical-align:middle;width:100%;}
.banner .cn{font-size:1.8rem;}
.banner .en{padding-left:2rem;padding-right:2rem;font-size:1.4rem;text-transform : uppercase;}
.banner a{color: #fff;}
.line2 span{width:4rem;border-top:1px solid #fff;display:inline-block;}
.bannerWrap{display:table;width:100%;}

.list-product {text-align:center;}
.list-product .img a{display:block;width:100%;}
.list-product .title{font-size:1.6rem;height:4rem;overflow:hidden;line-height: 2rem}
.list-product  a{color:#333333;}
.list-product .title2{font-size:1.4rem;}
.more{font-size:2rem;text-align:center;line-height:3rem;color:#333333;}

.list-select{padding:1rem 0 ;}
.select{display:inline-block;position:relative;margin:0 1rem;height:3rem;line-height:3rem;padding-right:1.5rem;}
.select:active{background:rgba(0,0,0,0.15)}
.select:after{position:absolute;content:"";border-style:solid;border-width:0.5rem;border-color:#333 transparent transparent transparent;right:0;top:50%;margin-top:-0.25rem;}
.select .text{font-size:1.4rem;font-style:normal;}
.select select{position:absolute;left:0;top:0;height:100%;z-index:1;opacity:0;width:100%;}

.intro {font-size: 1.2rem;text-align: justify;padding:2rem;}

.btn{border-width: 1px;border-color: rgb(36, 55, 35);border-style: solid;width: 20rem;height: 4rem;display:inline-block;text-align:center;line-height:58px;font-size:1.4rem;line-height:4rem;color:#333;}
.btn:active{
	transform:scale(0.9);
	-webkit-transform:scale(0.9);
}

.list-hd.container{padding:0;}
.list-hd img{display:block;}
.list-hd .imgWrap{display:block;overflow:hidden;}
.list-hd p{margin-bottom: 40px;}
.imgWrap:active img{transform:scale(1.1);-webkit-transform:scale(1.1);}
.list-hd .title-hd{font-size:24px;margin:0 2rem;}
.list-hd .row .title-hd{font-size:24px;margin:0 0;}

.list-hd .intro-hd{font-size:1.6rem;line-height: 2.2rem}
.list-hd .row .intro-hd,
.list-hd .row img{display:block;border:none;margin:1rem auto}
.list-hd .row h1{margin:1.5rem auto;font-size: 2.2rem;line-height: 2.2rem}
.list-hd .line3 {margin:0 2rem;}
.list-hd .btn-wrap{margin:0 2rem;}

.up{text-transform:uppercase;font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif}

.list-media{margin:2rem 0;}
.list-media .cell{margin-bottom:4rem;}
.list-media .time{font-size:1.2rem;color:#2c2c2c;}
.line3 span{border-bottom:1px solid #000;display:inline-block;width:50%;}
.list-media .title{font-size:1.5rem;margin:0.5rem 0;}
.list-media .introtext{font-size:1.2rem;}

.select-shoose .text{font-size:1.6rem;}
.wrap-select-shoose{border-bottom: 1px solid #aaa;margin: 0 1rem;padding: 1rem 1rem;margin-bottom:1rem;}
.shooseInfo .price{text-align: center;font-size:2.4rem;line-height:4rem;}
.shooseInfo .size{text-align: center;font-size:1.6rem;line-height:4rem;}
.shooseInfo{margin:0 2rem 4rem;}
.edit{font-size:1.6rem;}
.button-buy{
  background-color: rgb(0, 0, 0);
  height: 5rem;
  line-height: 5rem;
  display:block;
  color:#fff;
  text-align:center;
  font-size:1.6rem;
}

.lxwm{font-size:2.4rem;line-height:4rem;}

.detail-name{
    margin: 0.8rem 0;
    font-size: 1.6rem;
    font-weight: bold;
}


/*口牌故事*/
.banner{position: relative;z-index: 1;}
.banner .titleWrap,
.banner .titleWrap2{
    position:absolute;
    z-index:2;
    left:50%;
    margin-left:-45%;
    width:90%;
    text-align: left;
}
.banner .titleWrap{top:80%;padding:1rem 2rem;color:#000;background-color: #fff;}
.banner .titleWrap2{
    top: 25%;
    color: #fff;
}
.banner .titleWrap h1,
.banner .titleWrap2 h1{
    font-size: 2.2rem;font-weight: 600;line-height: 2.2rem;margin: 0;
}
.banner .titleWrap h2,
.banner .titleWrap2 h2{
    font-size: 1.6rem;font-weight:500;line-height: 2.2rem;margin-top: 2rem;
}
